<template>
  <div class="app-container">
    <div class="layout-padding-auto layout-padding-view">
      <div class="domTitle">
        <div>
          <span class="el-dropdown-link">
            草稿箱<i class="el-icon-caret-bottom"></i>
          </span>
        </div>
      </div>
      <div class="domContainer">
        <div class="drafts">
          <div class="draftsTop">
            <!-- <div class="draftsTeb">
              分类:
              <el-dropdown @command="handleCommand" trigger="click">
                <span class="el-dropdown-link">
                  全部<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="null">全部</el-dropdown-item>
                  <el-dropdown-item command="article">文章</el-dropdown-item>
                  <el-dropdown-item command="shortVideo">视频</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div> -->
              <el-tabs v-model="queryParams.dataType" @tab-click="handleCommand">
            <el-tab-pane label="文章" name="article"></el-tab-pane>
            <el-tab-pane label="视频" name="shortVideo"></el-tab-pane>
          </el-tabs>
            <div class="draftsNum">当前 {{ dataListNum }} 条内容</div>
          </div>
        
          <div class="draftsList">
            <div class="draftsDom" v-for="(item, index) in dataList" :key="index" v-if="queryParams.dataType==item.dataType">
              <div class="draftsDomText">
                <div class="draftsImg">
                  <img v-if="item.dataType === 'article' && item.data.imgPics" :src="item.data.imgPics[0]" alt="" />
                  <div class="videoImg" v-if="item.dataType == 'shortVideo'">
                    <img class="imgB" :src="item.data.imgPic" alt="" />
                    <img class="frame" src="@/assets/images/Frame.png" controls alt=""></img>
                  </div>
                  <div class="imgNull" v-if="
                    (item.data.imgPic == undefined &&
                      item.dataType == 'shortVideo') ||
                    (item.data.imgPics == undefined &&
                      item.dataType == 'article') ">
                    <img src="@/assets/images/imgNull.png" alt="" />
                    <div>无封面</div>
                  </div>
                </div>
                <div>
                  <h4>{{ item.data.title }}</h4>
                  <div class="draftsCon" v-if="item.dataType != 'shortVideo'">
                    {{ item.data.contentText || "[ 无内容 ]" }}
                  </div>
                </div>
              </div>
              <div>
                <p class="draftsTime">
                  {{ formatDate(parseFloat(item.createTimestamp)) }}
                </p>
                <div class="draftsBtn">
                  <div class="draftsDetails" @click.stop="draftsDetails(item)">
                    编辑
                  </div>
                  <div class="draftsDetails" @click.stop="Deleteopen(item,index)">
                    删除
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="draftsListNullShow" class="draftsListNull">
            草稿箱暂无作品
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userDraftList, userDraftDelete } from "@/api/articleRelease/index";
export default {
  data() {
    return {
      formDialogRef: "",
      excelUploadRef: "",
      dataList: [],
      dataListShow:'',
      dataListNum: 0,
      loading: false,
      pagination: null,
      queryParams: {dataType:"article"},
      draftsListNullShow: false,
       commandName:"article"
    };
  },
  created() { },
  mounted() {
    this.userDraftList();
  },
  methods: {
    handleCommand(command) {
      this.queryParams.dataType = command.name;
       this.dataListNum=0
       for(let item of this.dataList){
          if(command.name== item.dataType){
              this.dataListNum ++
          }
        }
    },
    Deleteopen(item,index) {
      this.$confirm("此操作将永久删除该草稿, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.userDraftDelete(item,index);
          this.$message({
            type: "success",
            message: "删除成功!"
          });

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    userDraftDelete(item,index) {
      const data = {
        ids: [item.id]
      };
      userDraftDelete(data).then(res => {
        this.dataListNum--
        this.dataList.splice(index, 1); //
      });
    },
    userDraftList() {
      const data = this.queryParams;
      userDraftList(data).then(res => {
        console.log(res);
        this.dataList = res.data;
        for(let item of this.dataList){
          if(item.dataType=='article'){
              this.dataListNum ++
          }
        }
      
        if (this.dataList.length === 0) {
          this.draftsListNullShow = true;
        }
      });
    },
    draftsDetails(e) {
      if (e.dataType === "shortVideo") {
        this.$router.push({ path: "/videoRelease", query: { draftId: e.id } });
      } else {
        this.$router.push({
          path: "/articleRelease",
          query: { draftId: e.id }
        });
      }
    },

    handleDelete() { },
    handleSelectionChange() { },
    exportExcel() { },
    formatDate(timestamp) {
      const date = new Date(timestamp);
      return date.toLocaleDateString(); // 或者使用其他格式化方法，例如 toLocaleString() 或 getFullYear(), getMonth(), getDate() 等
    },
    handleSizeChange() { },
    handleCurrentChange() { }
  }
};
</script>
<style lang="scss" scoped>
.draftsTitle {
  border-bottom: 1px solid #e3e3e3;
  padding: 15px 20px;
  font-size: 18px;
}

.domContainer {
  padding-left: 20px;
  padding-right: 20px;
}

.draftsTop {
  padding: 0 1.5%;
}

.draftsDom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 15px;
  border-bottom: 1px solid #e3e3e3;
  position: relative;
  box-sizing: content-box;
  height: 104px;
  margin-bottom: 15px;
  padding-bottom: 20px;
  cursor: pointer;

  h4 {
    font-size: 18px;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
  }

  p {
    color: #666;
  }

  .draftsDomTitle {
    margin-right: 20px;
  }

  .draftsImg {
    width: 138px;
    height: 104px;
    border: 1px solid #dddddd;
    display: flex;
    overflow: hidden;
    margin-right: 20px;
    background-color: #e3e3e3;
    border-radius: 4px 4px 4px 4px;
    position: relative;

    img {
      width: 100%;
    }

    .videoImg {
      width: 100%;
      position: absolute;
      height: 100%;

      .imgB {
        width: 100%;
        height: 100%;
      }

      .frame {
        width: 22px;
        height: 22px;
        position: absolute;
        z-index: 33;
        left: 42%;
        top: 40%;
      }
    }
  }

  .draftsDomText {
    display: flex;
  }

  .draftsDetails {
    color: #333;
    cursor: pointer;
    margin: 10px 0;
    margin-left: 10px;
  }

  .draftsTime {
    margin-bottom: 0;
  }
}

.draftsListNull {
  text-align: center;
  color: #666;
  height: 100%;
  margin-top: 20%;
}

.draftsList {
  height: calc(100% - 120px);
}

.draftsTeb {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  border: 1px solid #eeeeee;
  width: 160px;
  border-radius: 4px 4px 4px 4px;
  padding: 8px 8px;
  font-size: 14px;
  color: #999999;

  ::v-deep .el-dropdown {
    color: #999999;
    width: 110px;

    span {
      color: #333333;
      margin-left: 5px;
      width: 100%;
      display: block;
      cursor: pointer;

      i {
        float: right;
        color: #999999;
        font-size: 16px;
        margin-right: 2px;
      }
    }
  }

  .draftsTebDom {
    display: flex;
    align-items: center;
    margin-left: 10px;

    .draftsTebItem {
      margin: 0 10px;
      color: #999999;
      cursor: pointer;
    }

    .tebItemShow {
      color: #0052d9;
    }
  }
}

.draftsNum {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 14px;
}

.draftsBtn {
  display: flex;
  bottom: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  color: #999999;
}

.draftsTime {
  position: absolute;
  color: #666666;
  top: 0px;
  font-size: 12px;
  right: 0;
}

.draftsCon {
  width: 400px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  font-size: 12px;
  /* 限制显示的行数为3 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
